<template>
  <div id="app">
    <div class="header">
      <van-nav-bar
          title=""
          left-text=""
          left-arrow
          @click-left="onClickLeft"
      />
      <div class="time">12:00</div>
      <div class="title">积分商城</div>
      <div class="camera"></div>
    </div>
    <div class="content">
      <div class="section">
        <div class="section-title">虚拟兑换</div>
        <div class="subsection">
          <div class="subsection-title">热门虚拟权益服务</div>
          <div class="product-list">
            <div class="product-item">
              <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="KFCCoupon">
              <div class="product-details">
                <span>肯德基 香辣劲脆鸡</span>
                <span>腿堡电子抵用券...</span>
                <span>6000分</span>
              </div>
            </div>
            <div class="product-item">
              <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="KFCCoupon">
              <div class="product-details">
                <span>肯德基 香辣劲脆鸡</span>
                <span>腿堡电子抵用券...</span>
                <span>6000分</span>
              </div>
            </div>
            <div class="product-item">
              <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="KFCCoupon">
              <div class="product-details">
                <span>肯德基 香辣劲脆鸡</span>
                <span>腿堡电子抵用券...</span>
                <span>6000分</span>
              </div>
            </div>
          </div>
        </div>
        <div class="subsection">
          <div class="subsection-title">人气兑换</div>
          <div class="product-list">
            <div class="product-item">
              <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="BikeCard">
              <div class="product-details">
                <span>小黄车 城市自由骑行月卡</span>
                <span>6000分</span>
              </div>
            </div>
            <div class="product-item">
              <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="CarService">
              <div class="product-details">
                <span>嘀嘀 专车出行85折抵用券X5</span>
                <span>6000分</span>
              </div>
            </div>
            <div class="product-item">
              <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="BikeCard">
              <div class="product-details">
                <span>小黄车 城市自由骑行月卡</span>
                <span>6000分</span>
              </div>
            </div>
          </div>
        </div>
        <div class="subsection">
          <div class="subsection-title">美食餐饮</div>
          <div class="product-list">
            <div class="product-item">
              <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="KFCCoupon">
              <div class="product-details">
                <span>肯德基 香辣劲脆鸡</span>
                <span>腿堡电子抵用券...</span>
                <span>6000分</span>
              </div>
            </div>
            <div class="product-item">
              <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="KFCCoupon">
              <div class="product-details">
                <span>肯德基 香辣劲脆鸡</span>
                <span>腿堡电子抵用券...</span>
                <span>6000分</span>
              </div>
            </div>
            <div class="product-item">
              <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="KFCCoupon">
              <div class="product-details">
                <span>肯德基 香辣劲脆鸡</span>
                <span>腿堡电子抵用券...</span>
                <span>6000分</span>
              </div>
            </div>
          </div>
        </div>
        <div class="more-products">更多积分兑换 ></div>
      </div>
      <div class="section">
        <div class="section-title">实物兑换</div>
        <div class="subsection">
          <div class="subsection-title">优质好货任你兑换</div>
          <div class="product-list">
            <div class="product-item">
              <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="Notebook">
              <div class="product-details">
                <span>一款精美手账日记本</span>
                <span>¥66</span>
                <span>6000分</span>
              </div>
            </div>
            <div class="product-item">
              <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="T-shirt">
              <div class="product-details">
                <span>纯色简约夏天男士T恤</span>
                <span>¥66</span>
                <span>6000分</span>
              </div>
            </div>
            <div class="product-item">
              <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="Notebook">
              <div class="product-details">
                <span>一款精美手账日记本</span>
                <span>¥66</span>
                <span>6000分</span>
              </div>
            </div>
          </div>
        </div>
        <div class="product-list">
          <div class="product-item">
            <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="T-shirt">
            <div class="product-details">
              <span>纯色简约夏天男士T恤</span>
              <span>¥66</span>
              <span>6000分</span>
            </div>
          </div>
          <div class="product-item">
            <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="Notebook">
            <div class="product-details">
              <span>一款精美手账日记本</span>
              <span>¥66</span>
              <span>6000分</span>
            </div>
          </div>
          <div class="product-item">
            <img src="https://img1.baidu.com/it/u=4260116311,2629896417&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390" alt="T-shirt">
            <div class="product-details">
              <span>纯色简约夏天男士T恤</span>
              <span>¥66</span>
              <span>6000分</span>
            </div>
          </div>
        </div>
        <div class="more-products">更多积分兑换 ></div>
        <div class="end-message">已经到底啦</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    onClickLeft() {
      this.$router.push('/wode')
    }
  }
};
</script>

<style scoped>
#app {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.time {
  font-size: 12px;
}
.title {
  font-size: 16px;
  font-weight: bold;
}
.camera {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: lightgray;
}
.content {
  width: 100%;
  padding: 20px;
}
.section {
  margin-bottom: 20px;
}
.section-title {
             font-size: 16px;
             font-weight: bold;
             margin-bottom: 10px;
           }
.subsection {
  margin-bottom: 20px;
}
.subsection-title {
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 10px;
              }
.product-list {
             display: flex;
             flex-wrap: wrap;
             justify-content: space-between;
           }
.product-item {
             width: 30%;
             margin-bottom: 20px;
             display: flex;

             flex-direction: column;
             align-items: center;
           }
.product-item img {
             width: 100%;
             height: auto;
             margin-bottom: 10px;
           }
.product-details {
             text-align: center;
           }
.product-details span {
             display: block;
             margin-bottom: 5px;
           }
.more-products {
          text-align: right;
          color: gray;
          cursor: pointer;
        }
.end-message {
         text-align: center;
         color: gray;
         margin-top: 20px;
       }
</style>